<template>
  <div class="intrduce">
    <HeaderPage />
    <SearchHeader></SearchHeader>
    <navPage></navPage>
      <div class="w1200">
        <img src="../../assets/img/helpBnnaer1.png" alt="" class="banner1" />
        <div class="intuduct-con clearfix">
          <div class="intr-left fl">
            <p>
              助农服务系统联合银行，推出农业基地-大B采购商使用方案，实现网申网贷、即时审批、无抵押无担保，且可随借随还。
            </p>
            <img src="../../assets/img/pic1.png" alt="" />
          </div>
          <div class="intr-right fr">
            <div class="intr-right-con" v-if="applyStatus">
              <ul>
                <li class="clearfix">
                  <img src="../../assets/img/safe.png" alt="" class="fl" />
                  <div class="intr-con">
                    <p>实名认证 轻松申请</p>
                    <p>流程高效快速采购成功</p>
                  </div>
                </li>
                <li class="clearfix">
                  <img src="../../assets/img/realName.png" alt="" class="fl" />
                  <div class="intr-con">
                    <p>业务范围覆盖 安全高效</p>
                    <p>满足企业多层次的业务需求</p>
                  </div>
                </li>
              </ul>


              <nuxt-link v-if="uesrRoleType === 'BASE'" to="/helpFamiFinance/applyRecord" class="atonce-apply"
                >立即申请</nuxt-link
              >
               <p v-else @click="showNoOperation()" class="atonce-apply">立即申请</p>

            </div>

            <div v-else class="apply-result">

              <img src="../../assets/img/succ.png" />
              <p class="status">提交成功</p>
              <p class="prompt">您的申请已经提交成功，请耐心等待管理员的审核</p>

              <nuxt-link to="/" class="back-home">返回首页</nuxt-link>
            </div>
          </div>
        </div>
      </div>

    <FooterPage></FooterPage>
  </div>
</template>
<script>
import HeaderPage from "../../components/head";
import SearchHeader from "../indexHome/searchHeader";
import FooterPage from "../../components/footer";
import navPage from "../../components/nav";
import upload from "../../components/upLoad/index";
import Cookie from "js-cookie";

export default {
  components: {
    HeaderPage,
    SearchHeader,
    FooterPage,
    navPage,
    upload,
  },
  mounted() {
    console.log(this.fileUploadUrl);
    if (this.$route.query.applyStatus) {
      this.applyStatus = false;
    }
    console.log("用户token：",this.userToken);
  },
  data() {
    return {
      applyStatus: true,
      userToken: Cookie.get("token"),
      uesrRoleType: Cookie.get("roleId"),
    };
  },
  methods: {
   showNoOperation(){
     this.$message.error('该功能仅限基地商户使用...')
   }
  }
};
</script>
<style scoped>
.w1200 {
  width: 1200px;
  margin: 10px auto;
}
.banner1 {
  width: 1200px;
  height: 157px;
}
.intuduct-con {
  background: #fff;
  padding: 40px 0 129px 0;
  margin-bottom: 80px;
}

.intr-left {
  margin-left: 63px;
  width: 496px;
}
.intr-right {
  background: #fff3e4;
  margin-right: 81px;
  width: 439px;
  height: 409px;
}
.intr-left p {
  font-size: 14px;
  font-weight: 400;
  color: #535353;
  line-height: 20px;
}
.intr-left img {
  width: 495px;
  height: 335px;
  margin-top: 10px;
}
.intr-right-con {
  width: 321px;
  margin-top: 80px;
  min-height: 200px;
  margin-left: 55px;
}
.intr-right-con ul li:nth-child(1) img {
  width: 63px;
  height: 52px;
  margin-right: 40px;
  vertical-align: middle;
}
.intr-right-con ul li:nth-child(2) img {
  width: 63px;
  height: 61px;
  margin-right: 40px;
  vertical-align: middle;
}
.intr-right-con ul li:nth-child(1) {
  margin-bottom: 30px;
}
.intr-right-con ul li .intr-con {
  float: left;
}
.intr-right-con ul li:nth-child(1) .intr-con {
  margin-top: 20px;
}
.intr-right-con ul li:nth-child(2) .intr-con {
  margin-top: 10px;
}
.intr-right-con ul li .intr-con p:nth-child(1) {
  height: 22px;
  font-size: 16px;
  font-weight: 500;
  color: #656565;
  line-height: 22px;
}
.intr-right-con ul li .intr-con p:nth-child(2) {
  height: 17px;
  font-size: 12px;
  font-weight: 400;
  color: #a09d9a;
  line-height: 17px;
}
.atonce-apply {
  width: 321px;
  height: 52px;
  background: #f48d06;
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  line-height: 52px;
  margin-top: 80px;
  cursor: pointer;
  display: block;
}
.atonce-apply:hover {
  opacity: 0.8;
}
.apply-result {
  width: 321px;
  margin-top: 80px;
  min-height: 200px;
  margin-left: 55px;
  text-align: center;
}
.apply-result .status {
  font-size: 18px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 27px;
}
.apply-result .prompt {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  margin-top: 10px;
}

.back-home {
  width: 176px;
  height: 32px;
  background: #f48d06;
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  line-height: 32px;
  margin-top: 50px;
  cursor: pointer;
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.back-home:hover {
  opacity: 0.8;
}

.box {
  width: 1200px;
  margin:10px auto;
  min-height: 400px;
  padding-top: 60px;
  text-align: center;
  font-size: 14px;
  color: #666;
}

</style>
